<template>
  <div class="edit">
    <el-card class="box-card">
      <el-form>
        <el-form-item label="自动解除天数" prop="autoRemove">
          <el-input-number
            :min="0"
            controls-position="right"
            v-model.number="autoRemove"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>

      <el-form v-for="(item,index) in list" :key="index" :inline="true" ref="form" :model="item">
        <el-form-item label="当" prop="orderMin">
          <el-input-number controls-position="right" v-model="item.orderMin" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="<月销售单数<=" prop="orderMax">
          <el-input-number controls-position="right" v-model="item.orderMax" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="提成比例" prop="percent">
          <el-input
            v-model="item.percent"
            placeholder="请输入提成比例"
            :rules="[
                { required: true, message: '提成比例不能为空'},
                { type: 'number', message: '提成比例为数字值'},
            ]"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" v-if="list.length !==1" @click="remove(index)">删除</el-button>
          <el-button type="primary" v-if="index === list.length -1" @click="add">添加</el-button>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="submitForm">确定</el-button>
      <el-button @click="cancel">重置</el-button>
    </el-card>
  </div>
</template>

<script>
import {
  getPromoterCommissionSetting,
  savePromoterCommissionSetting
} from "@/api/system/promoterCommissionSetting";

export default {
  name: "PromoterCommissionSetting",
  data() {
    return {
      info: {},
      autoRemove: 0,
      list: [
        {
          orderMin: 0,
          orderMax: 0,
          percent: 100
        }
      ]
    };
  },
  created() {
    this.getEditInfo();
  },
  methods: {
    add() {
      this.list.push({
        orderMin: 0,
        orderMax: 0,
        percent: 100
      });
    },
    remove(index) {
      this.list.splice(index, 1);
    },
    submitForm() {
      savePromoterCommissionSetting({
        ...this.info,
        rule: JSON.stringify(this.list),
        autoRemove: this.autoRemove
      }).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
        }
      });
    },
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    },
    getEditInfo() {
      this.loading = true;
      getPromoterCommissionSetting().then(response => {
        this.info = response.data;
        this.autoRemove = response.data.autoRemove;
        this.list = this.info.rule
          ? JSON.parse(this.info.rule)
          : [
              {
                orderMin: 0,
                orderMax: 0,
                percent: 100
              }
            ];
      });
    }
  }
};
</script>
